<script setup lang="ts">
import { ref, onMounted } from 'vue';
const clickId = ref(0);
const prop = defineProps({
  sub: {
    type: Object,
    required: true,
  },
});
function changeId(id: number) {
  clickId.value = id;
}
</script>
<template>
  <div class="filter-sub" v-if="sub">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a href="#" class="active">全部</a>
        <template v-if="sub.brands.length > 0">
          <a href="#" v-for="(b, index) in sub.brands" :key="index">{{
            b.name
          }}</a>
        </template>
      </div>
    </div>
    <div class="item" v-for="attr in sub.saleProperties" :key="attr.id">
      <div class="head">{{ attr.name }}:</div>
      <div class="body">
        <a href="#" class="ellipsis active">全部</a>
        <a
          href="#"
          v-for="(b, index) in attr.properties"
          :key="index"
          class="ellipsis"
          >{{ b.name }}</a
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.active {
  color: #27ba9b;
}
.filter-sub {
  background-color: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        display: inline-block;
        max-width: 112px;
        margin-right: 36px;
      }
    }
  }
}
</style>
